<template>
   <uv-float-drawer>
      <!-- 主要内容区域 -->
      <template v-slot:main>
         <view class="main-content"></view>
      </template>

      <!-- 浮动面板内容 -->
      <template v-slot:float>
         <view class="float-content">
            <!-- 内容列表 -->
            <scroll-view class="content-list" scroll-y>
               <view class="list-section">
                  <uv-text text="📋 操作菜单" size="14" bold margin="0 0 8px 0" />
                  <uv-cell-group>
                     <uv-cell
                        v-for="item in menuItems"
                        :key="item.id"
                        :title="item.title"
                        :label="item.description"
                        :isLink="true"
                        @click="selectMenuItem(item)"
                     >
                        <template v-slot:icon>
                           <uv-icon :name="item.icon" size="20" :color="item.color" />
                        </template>
                     </uv-cell>
                  </uv-cell-group>
               </view>

               <!-- 占位内容，确保可以滚动 -->
               <view class="placeholder-content">
                  <uv-text text="📝 拖拽说明" size="14" bold margin="16px 0 8px 0" />
                  <view class="info-card">
                     <uv-text text="• 拖拽顶部灰色条可以上下移动面板位置" size="12" color="#666" />
                     <uv-text
                        text="• 面板内容可以正常滚动"
                        size="12"
                        color="#666"
                        margin="4px 0 0 0"
                     />
                     <uv-text text="• 支持惯性滑动效果" size="12" color="#666" margin="4px 0 0 0" />
                  </view>

                  <view v-for="i in 8" :key="i" class="placeholder-item">
                     <uv-text :text="`内容项 ${i}`" size="14" />
                     <uv-text
                        :text="`这是第 ${i} 个可滚动的内容项`"
                        size="12"
                        color="#666"
                        margin="2px 0 0 0"
                     />
                  </view>
               </view>
            </scroll-view>
         </view>
      </template>
   </uv-float-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 菜单项数据
const menuItems = ref([
   {
      id: 1,
      title: '导航路线',
      description: '获取最优路线规划',
      icon: 'map',
      color: '#3c9cff',
   },
   {
      id: 2,
      title: '附近搜索',
      description: '查找周边商户信息',
      icon: 'search',
      color: '#19be6b',
   },
   {
      id: 3,
      title: '收藏地点',
      description: '管理我的收藏地址',
      icon: 'heart',
      color: '#ff9900',
   },
   {
      id: 4,
      title: '历史记录',
      description: '查看搜索历史',
      icon: 'clock',
      color: '#606266',
   },
]);

const selectMenuItem = (item: any) => {
   console.log('选择菜单:', item);
   showToast(`选择了${item.title}`);
};

const showToast = (message: string) => {
   uni.showToast({
      title: message,
      icon: 'none',
      duration: 1500,
   });
};
</script>

<style lang="scss" scoped>
// 主要内容区域样式
.main-content {
   width: 100%;
   height: 100%;
   position: relative;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

// 浮动面板内容样式
.float-content {
   height: 100%;
   display: flex;
   flex-direction: column;
   background-color: #ffffff;

   .content-list {
      flex: 1;
      padding: 16px;

      .list-section {
         margin-bottom: 16px;
      }

      .placeholder-content {
         .info-card {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 12px;
            margin: 8px 0 16px 0;
            border-left: 4px solid #3c9cff;
         }

         .placeholder-item {
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;

            &:last-child {
               border-bottom: none;
            }
         }
      }
   }
}
</style>
